
<template>
    <div>
        <mu-tabs class="my-wrapper" v-if="showFlag" @change="navClick" :value="selected">
            <mu-tab class="swiper-slide" :value="0" @click="to0">
                <el-button type="text">宇宙</el-button>
            </mu-tab>
            <mu-tab class="swiper-slide" :value="1" @click="to1">
                <el-button type="text">官方</el-button>
            </mu-tab>
            <mu-tab class="swiper-slide" :value="2" @click="to2">
                <el-button type="text">我的</el-button>
            </mu-tab>
            <mu-tab class="swiper-slide" :value="3" @click="to3">
                <el-button type="text">协作</el-button>
            </mu-tab>
            <mu-tab class="swiper-slide" :value="4" @click="to4">
                <el-button type="text">人际</el-button>
            </mu-tab>
            <mu-tab class="swiper-slide" :value="5" @click="to5">
                <el-button type="text">设置</el-button>
            </mu-tab>
        </mu-tabs>
    </div>
</template>
  
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
    name: 'swiper-example-mousewheel-control',
    title: 'Mousewheel control',
    components: {
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            showFlag: true,
            selected: 0,
            swiperOption: {
                wrapperClass: 'my-wrapper',
                direction: 'horizontal',
                slidesPerView: 3,
                slidesPerGroup: 3,
                mousewheel: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                }
            }
        }
    },
    methods: {
        navClick(val) {
            console.log('navClick', val)
        },
        to0(val) {
            console.log('to0', val)
        },
        to1(val) {
            console.log('to1', val)
        },
        to2(val) {
            console.log('to2', val)
        },
        to3(val) {
            console.log('to3', val)
        },
        to4(val) {
            console.log('to4', val)
        },
        to5(val) {
            console.log('to5', val)
        },
    },
}
</script>
  
<style lang="scss" scoped>
.my-wrapper {
    display: flex;

    .swiper-slide {
        width: 33%;
    }
}
</style>